<template>
	<view class="container">
		<view class="flex diygw-col-24">
			<view class="diygw-grid diygw-actions">
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar">
							<image mode="aspectFit" class="diygw-avatar-img" src="/static/grid1.png"></image>
						</view>
						<view class="diygw-grid-title"> 菜单一 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar">
							<image mode="aspectFit" class="diygw-avatar-img" src="/static/grid2.png"></image>
						</view>
						<view class="diygw-grid-title"> 菜单二 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar">
							<image mode="aspectFit" class="diygw-avatar-img" src="/static/grid3.png"></image>
						</view>
						<view class="diygw-grid-title"> 菜单三 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar">
							<image mode="aspectFit" class="diygw-avatar-img" src="/static/grid4.png"></image>
						</view>
						<view class="diygw-grid-title"> 菜单四 </view>
					</view>
				</button>
			</view>
		</view>
		<view class="flex diygw-col-24">
			<view class="diygw-grid diygw-actions">
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-home">
							<view class="diygw-tag badge red"> 1 </view>
						</view>
						<view class="diygw-grid-title"> 菜单一 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-settings"> </view>
						<view class="diygw-grid-title"> 菜单二 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-subscription"> </view>
						<view class="diygw-grid-title"> 菜单三 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-skin"> </view>
						<view class="diygw-grid-title"> 菜单四 </view>
					</view>
				</button>
			</view>
		</view>
		<view class="flex diygw-col-24">
			<view class="diygw-grid diygw-actions">
				<button class="diygw-action">
					<view class="diygw-grid-inner solid-right">
						<view class="diygw-grid-icon diygw-avatar diy-icon-home"> </view>
						<view class="diygw-grid-title"> 带边框 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner solid-right">
						<view class="diygw-grid-icon diygw-avatar diy-icon-settings">
							<view class="diygw-tag badge red"> 1 </view>
						</view>
						<view class="diygw-grid-title"> 菜单二 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner solid-right">
						<view class="diygw-grid-icon diygw-avatar diy-icon-subscription"> </view>
						<view class="diygw-grid-title"> 菜单三 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner solid-right">
						<view class="diygw-grid-icon diygw-avatar diy-icon-skin"> </view>
						<view class="diygw-grid-title"> 菜单四 </view>
					</view>
				</button>
			</view>
		</view>
		<view class="flex diygw-col-24">
			<view class="diygw-grid diygw-actions">
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-home"> </view>
						<view class="diygw-grid-title"> 菜单一 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-settings"> </view>
						<view class="diygw-grid-title"> 菜单二 </view>
					</view>
				</button>
				<button class="diygw-action bg-red">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-subscription"> </view>
						<view class="diygw-grid-title"> 菜单三 </view>
					</view>
				</button>
				<button class="diygw-action bg-green">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-skin"> </view>
						<view class="diygw-grid-title"> 菜单四 </view>
					</view>
				</button>
			</view>
		</view>
		<view class="flex diygw-col-24">
			<view class="diygw-grid diygw-actions">
				<button class="diygw-action radius-left bg-red">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-subscription"> </view>
						<view class="diygw-grid-title"> 菜单三 </view>
					</view>
				</button>
				<button class="diygw-action radius-right bg-green">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-skin"> </view>
						<view class="diygw-grid-title"> 菜单四 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-home"> </view>
						<view class="diygw-grid-title"> 菜单一 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-settings"> </view>
						<view class="diygw-grid-title"> 菜单二 </view>
					</view>
				</button>
			</view>
		</view>
		<view class="flex diygw-col-24">
			<view class="diygw-grid diygw-actions">
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-home"> </view>
						<view class="diygw-grid-title"> 菜单一 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-settings"> </view>
						<view class="diygw-grid-title"> 菜单二 </view>
					</view>
				</button>
				<button class="diygw-action radius-left bg-red">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-subscription"> </view>
						<view class="diygw-grid-title"> 菜单三 </view>
					</view>
				</button>
				<button class="diygw-action radius-right bg-green">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-skin"> </view>
						<view class="diygw-grid-title"> 菜单四 </view>
					</view>
				</button>
			</view>
		</view>
		<view class="flex diygw-col-24">
			<view class="diygw-grid diygw-actions">
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-home"> </view>
						<view class="diygw-grid-title"> 菜单一 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-settings"> </view>
						<view class="diygw-grid-title"> 菜单二 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-subscription"> </view>
						<view class="diygw-grid-title"> 菜单三 </view>
					</view>
				</button>
				<button class="diygw-action radius bg-green">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-skin"> </view>
						<view class="diygw-grid-title"> 菜单四 </view>
					</view>
				</button>
			</view>
		</view>
		<view class="flex diygw-col-24 diygw-bottom">
			<view class="diygw-grid diygw-actions">
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar">
							<image mode="aspectFit" class="diygw-avatar-img" src="/static/grid1.png"></image>
						</view>
						<view class="diygw-grid-title"> 菜单一 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar">
							<image mode="aspectFit" class="diygw-avatar-img" src="/static/grid2.png"></image>
						</view>
						<view class="diygw-grid-title"> 菜单二 </view>
					</view>
				</button>
				<button class="diygw-action addon">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar">
							<image mode="aspectFit" class="diygw-avatar-img" src="/static/grid3.png"></image>
						</view>
						<view class="diygw-grid-title"> 菜单三 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar">
							<image mode="aspectFit" class="diygw-avatar-img" src="/static/grid4.png"></image>
						</view>
						<view class="diygw-grid-title"> 菜单四 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar">
							<image mode="aspectFit" class="diygw-avatar-img" src="/static/grid1.png"></image>
						</view>
						<view class="diygw-grid-title"> 菜单一 </view>
					</view>
				</button>
			</view>
		</view>
		<view class="flex diygw-col-24">
			<view class="diygw-grid diygw-actions">
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-home"> </view>
						<view class="diygw-grid-title"> 菜单一 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-settings"> </view>
						<view class="diygw-grid-title"> 菜单二 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-subscription"> </view>
						<view class="diygw-grid-title"> 菜单三 </view>
					</view>
				</button>
				<button class="diygw-action bg-green">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-skin"> </view>
						<view class="diygw-grid-title"> 菜单四 </view>
					</view>
				</button>
			</view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	//create by: 邓志锋 <280160522@qq.com> <https://www.diygw.com> DIYGW可视化设计一键生成源码
	export default {
		data() {
			return {};
		},
		onShareAppMessage: function () {},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: option
				});
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			async init() {}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 80px;
	}
</style>
